<template>
  <view class="select">
    <!-- 顶部搜索框开始 -->
    <view class="top">
      <YgSerch></YgSerch>
    </view>
    <!-- 顶部搜索框结束 -->

    <!-- 中间部分 -->
    <view class="content">
      <!-- 左边 -->
      <view class="left">
        <view
          v-for="(item, index) in title"
          :key="index"
          :class="
            goodsIndex == index ? 'goodsCategory active' : 'goodsCategory'
          "
          @click="handel(index)"
          >{{ item }}</view
        >
      </view>

      <!-- 右边内容 -->
      <!-- 解决滚动条不能回到顶部的问题 -->
      <scroll-view
        class="right"
        scroll-y
        :scroll-top="scrollTop"
        enable-back-to-top
      >
        <view
          class="rightContent"
          v-for="item1 in goods.children"
          :key="item1.cat_id"
        >
          <!-- 商品的大标题 -->
          <view class="title">/ {{ item1.cat_name }} /</view>

          <view class="contentRight">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
            >
              <!-- 商品图片 -->
              <image :src="item2.cat_icon" mode="widthFix"></image>

              <!-- 商品名称 -->
              <view class="goods_subtitle">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部 -->
    <view class="footer"></view>
  </view>
</template>

<script>
// 定义一个全局变量用来存从服务器请求回来的数据
let cateList = [];
export default {
  data() {
    return {
      // 左边商品分类
      title: [],
      // 右边详细商品
      goods: [],
      //下标
      goodsIndex: 0,
      // 滚动条的位置
      scrollTop: 0,
    };
  },
  onLoad() {
    //把数据做一个本地的缓存 有两种情况：
    //判断有没有数据的时候 ：  1.有数据时：从本地缓存里面拿数据。 2.没数据时，发送请求添加数据到本地缓存
    // wx.setStorageSync(key, data);
    // wx.getStorageSync("");
    // 获取本地缓存是否有数据
    let categoryStorage = uni.getStorageSync("category");
    //有数据时,有两种情况：
    if (categoryStorage) {
      console.log("有数据");
      // 判断数据是否过期了，超过30s，过期了重新发送请求
      if (Date.now() - categoryStorage.time > 1000 * 30) {
        console.log("数据过期了，我重新发送请求了");
        this.getResCategories();
      } else {
        console.log("数据没有过期");
        //没有过期直接使用
        // 直接修改数据的来源即可
        cateList = categoryStorage.data;
        this.title = cateList.map((item) => item.cat_name);
        //默认大家电被选中
        this.goods = cateList[0];
      }
    } else {
      //无数据
      this.getResCategories();
      console.log("无数据");
    }
  },
  //函数
  methods: {
    //将发送商品分类请求封装成一个函数
    async getResCategories() {
      //分类请求数据 https://api-hmugo-web.itheima.net/api/public/v1/categories
      const resCategories = await this.$u.get("/categories");
      console.log("商品分类", resCategories);
      //把请求回来的数据赋值给cateList
      cateList = resCategories.message;
      // 把标题筛选出来，存到title数组里面
      this.title = cateList.map((item) => item.cat_name);
      //默认大家电被选中
      this.goods = cateList[0];
      //把数据添加到本地缓存
      uni.setStorageSync("category", {
        time: Date.now(),
        data: resCategories.message,
      });
    },

    //点击商品分类，给对应的添加类
    handel(index) {
      this.goodsIndex = index;
      //点击后把下标传给详情商品，渲染数据
      this.goods = cateList[index];
      // 设置滚动条回到最顶部
      this.scrollTop =
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random();
    },
  },
};
</script>

<style lang="scss">
.select {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  overflow: hidden;
  flex: 1;
  display: flex;
}
.left {
  width: 180rpx;
  background-color: #f3f3f3;
  overflow: auto;
  .active {
    position: relative;
    color: $themeColor;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      height: 80%;
      left: 0;
      transform: translateY(-50%);
      border-left: 2px solid $themeColor;
    }
  }
  .goodsCategory {
    height: 80rpx;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.right {
  flex: 1;
  overflow: auto;
  //右边商品标题
  .title {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
  }

  //右边商品商品详情
  .contentRight {
    display: flex;
    flex-wrap: wrap;

    navigator {
      width: 33.33%;
      text-align: center;
      margin-bottom: 10rpx;
      image {
        width: 60%;
      }
    }
    .goods_subtitle {
      font-size: 26rpx;
    }
  }
}
</style>